<template>
	<view class="agent-income-commission" :style="{background:pageColor}" v-if="isLoad">

		<fixed zIndex="997">
			<view class="fill-base pd-lg flex-between c-title">
				<view class="f-mini-title text-bold">充值时间</view>
				<view @tap.stop="showDate = true" class="flex-y-center f-paragraph">
					{{ param | handleTimeText }} <i @tap.stop="toReset" class="iconfont pl-sm"
						:class="[{'icongengduo_1':!param.start_time},{'icon-close':param.start_time}]"
						:style="{color:!param.start_time?'#5A677E':'#FF2404',fontSize:!param.start_time?'20rpx':'34rpx'}"></i>
				</view>
			</view>
		</fixed>
		<view class="space-md fill-body"></view>
		<view class="fill-base pt-lg pl-lg pr-lg">
			<view class="f-mini-title c-title text-bold" :class="[{'pb-lg':list.data.length==0}]">累计充值
				¥{{list.total_recharge_cash || 0}}</view>
			<view class="list-item flex-center pt-lg pb-lg" :class="[{'b-1px-t':index!==0}]"
				v-for="(item,index) in list.data" :key="index">
				<i class="iconfont"
					:class="[{'icon-weixin-fill':item.pay_model==1},{'icon-alipay-fill':item.pay_model==3}]"
					:style="{color:item.pay_model==1?'#44A860':'#3B94F5'}" style="font-size:80rpx"></i>
				<view class="flex-1 ml-md">
					<view class="flex-between f-paragraph c-title text-bold">
						<view>{{item.pay_model==1?'微信':'支付宝'}}支付充值</view>
						<view>¥{{item.cash}}</view>
					</view>
					<view class="f-caption c-caption" style="margin-top: 15rpx;">{{item.pay_time}}</view>
				</view>
			</view>
		</view>

		<load-more :noMore="list.current_page>=list.last_page&&list.data.length>0" :loading="loading">
		</load-more>
		<abnor v-if="!loading&&list.data.length<=0&&list.current_page==1"
			percent="calc(100vh - 114px - calc(30rpx + env(safe-area-inset-bottom) / 2))"></abnor>

		<view class="space-footer"></view>

		<w-picker mode="range" :startYear="startYear*1-10" :endYear="startYear" :value="toDay" :current="false"
			fields="day" @confirm="onConfirm($event)" :disabled-after="false" ref="day" :themeColor="primaryColor"
			:visible.sync="showDate">
		</w-picker>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex"
	import $util from "@/utils/index.js"
	export default {
		components: {
		},
		data() {
			return {
				isLoad: false,
				showDate: false,
				startYear: '',
				toDay: '',
				param: {
					page: 1,
					start_time: '',
					end_time: '',
				},
				list: {
					data: []
				},
				loading: true,
			}
		},
		computed: mapState({}),
		async onLoad() {
			this.toDay = this.$util.formatTime(new Date(), 'YY-M-D')
			this.startYear = this.$util.formatTime(new Date(), 'YY')
			await this.initIndex()
			this.isLoad = true
		},
		onPullDownRefresh() {
			// #ifndef APP-PLUS
			uni.showNavigationBarLoading()
			// #endif
			this.initRefresh()
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			if (this.list.current_page >= this.list.last_page || this.loading) return;
			this.param.page = this.param.page + 1;
			this.loading = true;
			this.getList();
		},
		methods: {
			...mapMutations([]),
			async initIndex(refresh = false) {
				await this.getList()
				this.$util.setNavigationBarColor({
					bg: this.primaryColor
				})
				// #ifdef H5
				if (!refresh) {
					this.$jweixin.hideOptionMenu()
				}
				// #endif
			},
			initRefresh() {
				this.param.page = 1
				this.initIndex(true)
			},
			async getList(page) {
				if (page) {
					this.param.page = 1
					this.list.data = []
					uni.pageScrollTo({
						scrollTop: 0
					})
				}
				let {
					list: oldList,
				} = this
				let param = this.$util.deepCopy(this.param)
				let newList = await this.$api.agent.rechargeList(param);
				if (this.param.page == 1) {
					this.list = newList
				} else {
					newList.data = oldList.data.concat(newList.data)
					this.list = newList
				}
				this.loading = false
				this.$util.hideAll()
			},
			onConfirm(e) {
				let start_time = e.value[0]
				let end_time = e.value[1]
				this.param.start_time = this.$util.DateToUnix(start_time)
				this.param.end_time = this.$util.DateToUnix(end_time) + 24 * 3600 - 1
				this.getList(1)
			},
			toReset() {
				if (this.param.start_time) {
					this.param.start_time = ''
					this.param.end_time = ''
					this.getList(1)
				}
			}
		},
		filters: {
			handleTimeText(val) {
				let text = '请选择'
				let {
					start_time,
					end_time
				} = val
				let formatType = 'YY.M.D'
				if (start_time && end_time) {
					text = $util.formatTime(start_time * 1000, formatType) + ' - ' +
						$util.formatTime(end_time * 1000, formatType)
				}
				return text
			}
		}
	}
</script>


<style lang="scss"> 
	.agent-income-commission {

		.popup-status {
			width: 750rpx;
			height: 360rpx;
			border-radius: 30rpx 30rpx 0 0;
		}
	}
</style>